<template>
  <view class="container">
    <view class="header">
      <text class="title">用户注册</text>
      <text class="subtitle">请填写以下信息完成注册</text>
    </view>

    <view class="form-section">
      <uni-forms ref="form" :model="formData" :rules="rules">
        <uni-forms-item name="username">
          <uni-easyinput
            v-model="formData.username"
            placeholder="请输入用户名"
            :clearable="true"
            :prefixIcon="'person'"
          />
        </uni-forms-item>

        <uni-forms-item name="nickname">
          <uni-easyinput
            v-model="formData.nickname"
            placeholder="请输入昵称"
            :clearable="true"
            :prefixIcon="'person'"
          />
        </uni-forms-item>

        <uni-forms-item name="password">
          <uni-easyinput
            v-model="formData.password"
            type="password"
            placeholder="请设置密码"
            :clearable="true"
            :prefixIcon="'locked'"
          />
        </uni-forms-item>

        <uni-forms-item name="confirmPassword">
          <uni-easyinput
            v-model="formData.confirmPassword"
            type="password"
            placeholder="请确认密码"
            :clearable="true"
            :prefixIcon="'locked'"
          />
        </uni-forms-item>

        <uni-forms-item name="userType">
          <uni-data-select
            v-model="formData.userType"
            :localdata="userTypeOptions"
            placeholder="请选择用户类型"
          />
        </uni-forms-item>
      </uni-forms>

      <button class="register-btn" @click="register">注册</button>
    </view>

    <!-- 返回登录 -->
    <view class="back-login">
      <text>已有账号？</text>
      <text class="link" @click="backToLogin">返回登录</text>
    </view>

    <!-- 用户协议 -->
    <view class="agreement">
      <view class="checkbox-item">
        <checkbox :checked="agreeTerms" @change="onAgreeChange" />
        <text>我已阅读并同意</text>
        <text class="link">《用户协议》</text>
        <text>和</text>
        <text class="link">《隐私政策》</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'

const agreeTerms = ref(false)
const form = ref()

// 用户类型选项
const userTypeOptions = [
  { value: 'normal', text: '普通用户' },
  { value: 'sales', text: '销售人员' }
]

// 表单数据
const formData = reactive({
  username: '',
  nickname: '',
  password: '',
  confirmPassword: '',
  userType: 'normal'
})

// 表单验证规则
const rules = {
  username: {
    rules: [
      { required: true, errorMessage: '请输入用户名' },
      { minLength: 3, maxLength: 20, errorMessage: '用户名长度在3-20个字符之间' }
    ]
  },
  nickname: {
    rules: [
      { required: true, errorMessage: '请输入昵称' },
      { minLength: 2, maxLength: 20, errorMessage: '昵称长度在2-20个字符之间' }
    ]
  },
  password: {
    rules: [
      { required: true, errorMessage: '请设置密码' },
      { minLength: 6, maxLength: 20, errorMessage: '密码长度在6-20个字符之间' }
    ]
  },
  confirmPassword: {
    rules: [
      { required: true, errorMessage: '请确认密码' },
      {
        validateFunction: (rule: any, value: string, data: any) => {
          if (value !== data.password) {
            return '两次输入的密码不一致'
          }
          return true
        }
      }
    ]
  },
  userType: {
    rules: [
      { required: true, errorMessage: '请选择用户类型' }
    ]
  }
}

// 同意协议
const onAgreeChange = (e: any) => {
  agreeTerms.value = e.detail.value
}

// 注册
const register = () => {
  if (!agreeTerms.value) {
    uni.showToast({
      title: '请先同意用户协议',
      icon: 'none'
    })
    return
  }

  form.value?.validate().then((res: any) => {
    if (res.valid) {
      // 模拟注册请求
      uni.showLoading({
        title: '注册中...'
      })

      setTimeout(() => {
        uni.hideLoading()
        uni.showToast({
          title: '注册成功',
          icon: 'success'
        })

        // 保存用户信息
        uni.setStorageSync('userInfo', {
          id: 1,
          username: formData.username,
          nickname: formData.nickname,
          avatar: '/static/avatar.png',
          userType: formData.userType,
          phone: ''
        })

        // 跳转到首页
        setTimeout(() => {
          uni.switchTab({
            url: '/pages/index/index'
          })
        }, 1500)
      }, 2000)
    }
  })
}

// 返回登录页面
const backToLogin = () => {
  uni.navigateBack()
}
</script>

<style scoped>
.container {
  padding: 60rpx 40rpx;
  background-color: #fff;
  min-height: 100vh;
}

.header {
  text-align: center;
  margin-bottom: 60rpx;
}

.title {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 20rpx;
}

.subtitle {
  font-size: 28rpx;
  color: #666;
}

.form-section {
  margin-bottom: 60rpx;
}

.register-btn {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  background-color: #007AFF;
  color: #fff;
  font-size: 32rpx;
  border-radius: 44rpx;
  margin-top: 40rpx;
}

.back-login {
  text-align: center;
  margin-bottom: 40rpx;
  font-size: 28rpx;
  color: #666;
}

.link {
  color: #007AFF;
  margin-left: 10rpx;
}

.agreement {
  text-align: center;
}

.checkbox-item {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  color: #666;
  line-height: 1.5;
}

.agreement .link {
  color: #007AFF;
}
</style>
